<template>
    <div class="user">
        <el-form :inline="true" :model="search">
            <el-row :span="24">
                <el-col :span="18" style="display: flex">
                    <el-form-item label="姓名">
                        <el-input v-model="search.name" placeholder="请输入用户姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="search.phone" placeholder="请输入用户手机号"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                        <el-button plain @click="onReset">清空</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <div style="display: flex;flex-direction:row-reverse">
                        <el-button type="primary" plain style="float:right" @click="addUser"
                            v-if="hasPrivilege('user:add')">添加用户
                        </el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>
        <el-row :span="24">
            <el-col :span="24">
                <div style="display: flex">
                    <el-button style="margin-bottom: 10px" plain @click="selectionCancel">取消勾选</el-button>
                    <el-button style="margin-bottom: 10px" type="danger" v-if="hasPrivilege('user:delete')"
                        @click="deleteBatch">批量删除
                    </el-button>
                </div>
            </el-col>
        </el-row>
        <el-table ref="multipleTable" :data="tableData" border stripe style="width: 100%">
            <el-table-column type="selection">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
            </el-table-column>
            <el-table-column prop="sex_text" label="性别">
            </el-table-column>
            <el-table-column prop="phone" label="手机号">
            </el-table-column>
            <el-table-column prop="roleNames" label="用户角色">
            </el-table-column>
            <el-table-column prop="organizationName" label="所属部门">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
            </el-table-column>
            <el-table-column label="操作" width="240px">
                <template slot-scope="scope" v-if="scope.row.id != 1">
                    <el-button type="primary" plain style="margin-right: 10px" size="mini"
                        v-if="hasPrivilege('user:edit')" @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-popconfirm confirm-button-text='确定' cancel-button-text='不用了' icon="el-icon-info"
                        icon-color="red" title="确定重置密码吗？" @confirm="resetPassword(scope.$index, scope.row)">
                        <el-button size="mini" type="warning" plain v-if="hasPrivilege('user:resetPassword')"
                            slot="reference"> 重置密码
                        </el-button>
                    </el-popconfirm>
                    <el-button type="danger" plain style="margin-left: 10px" size="mini"
                        v-if="hasPrivilege('user:delete')" @click="deleteUser(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :page-sizes="[10, 50, 100, 200]" :page-size="search.size"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <UserEditor @refreshRow="refreshRow" ref="dialog" />
    </div>
</template>


<script>

import { systemApi, commonApi } from "../../api/api";
import form from "@/utils/form";
import UserEditor from "./UserEditor";
import tables from "@/utils/tables";

export default {
    components: {
        UserEditor
    },
    mixins: [tables, form],
    data() {
        return {
            tableData: [],
            total: 0,
            search: {
                name: '',
                phone: '',
                size: 10,
                current: 1
            },
        }
    },
    created() {
        this.onSubmit();
    },
    methods: {
        onSubmit() {
            commonApi.page("user", this.search).then(res => {
                this.loadPage(res, ['sex'])
            })
        },
        handleEdit(index, row) {
            Reflect.deleteProperty(row, 'password')
            let form = { ...row };
            if (row.roleIds != null && row.roleIds.length > 0) {
                form.roleIds = row.roleIds.split(",").map(data => {
                    return +data
                })
            }
            this.$refs['dialog'].setData("dialogFormVisible", true)
                .setData("type", 2)
                .setData("form", form)
                .setData("index", index)
            sessionStorage.setItem("validator.username", row.name)

        },
        resetPassword(index, row) {
            systemApi.resetPassword({ id: row.id, password: "123456" }).then(
                commonApi.popoverSuccessMessage, commonApi.popoverErrorMessage
            ).catch(commonApi.popoverErrorMessage)
        },
        refreshRow(index, formData) {
            formData.roleIds = formData.roleIds.join(",")
            this.refreshRow(index, formData);
        },
        addUser() {
            sessionStorage.removeItem("validator.username")
            this.$refs['dialog'].setData("dialogFormVisible", true)
                .setData("type", 1).setData("form", { "sex": 1 })
        },
        selectionCancel() {
            this.$refs["multipleTable"].clearSelection();
        },
        deleteBatch() {
            if (this.multipleSelection.length > 0) {
                let ids = this.multipleSelection.map(e => e.id);
                this.confirmPopover(this.deleteRequest, { userIds: ids })
            }
        },
        deleteUser(row) {
            this.confirmOperation("此操作将永久删除用户, 是否继续?", this.deleteRequest, { "userIds": [row.id] })
        },
        deleteRequest(data) {
            systemApi.batchDeleteUser(data).then(result => {
                this.onSubmit()
                commonApi.popoverSuccessMessage(result)
            }, commonApi.popoverErrorMessage).catch(commonApi.popoverErrorMessage)
        }
    }
}
</script>

<style lang="scss" scoped>
.user {
    .block {
        margin: 20px;
        float: right;
    }
}
</style>